[CSS] background-position 백그라운드 위치 조정방법

Last Modified : 2019-08-21 / Created : 2015-03-09

17,243
View Count

주소 복사하기

css를 사용하여 백그라운드 위치를 조정하는 방법에 대하여 알아봅니다.

# CSS의 background-position으로 백그라운드 위치 조정하기

백그라운드 위치는 background-position이라는 css 속성을 사용해 위치 조정이 가능합니다. 간단한 문법은 아래와 같습니다.

background-position: 좌우값 상하값;

설정하는 값의 단위는 px 또는 % 등을 사용할 수 있습니다. 그리고 left top bottom right center처럼 리터럴로 입력할 수도 있습니다.

background-position: 0 0;
background-position: 10px 50px;
background-position: 50% 50%;
background-position: center center;
background-position: inherit;

그럼 간단한 예제를 만들어 알어보도록 하겠습니다.

@ 백그라운드 이미지를 좌우 50% 상하 30% 조정해야하는경우...

background-position: 50% 30%;
// 좌우 상하 30%로 각각 설정

위와 같이 사용할 수 있습니다.

! 더 알아보기

background-position은 아래 두 개의 속성의 축약 속성입니다. 즉 아래처럼 각각 사용할 수 있습니다.

background-position-x: 50%;
background-position-y: 30%;

동일한 결과지만 위와 같이 사용하는 것보다는 한 번에 적용하는 background-position이 더 많이 사용됩니다.

@ 호환성 관련
하지만 위에 있는 background-position-x와 background-position-y 속성의 경우 표준 속성이 아니라 일부 브라우저 특히 파이어폭스(Firefox)에서는 적용되지 않으니 참고하시기 바랍니다.

백그라운드 background

아래의 글도 찾고 계시지 않나요?

[CSS] 텍스트 및 링크에 밑줄 표시 및 마우스를 올릴 경우 밑줄

[HTML/CSS] 텍스트 마우스 드래그시 색상 변경방법, ::selection